<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Document</title>
</head>

<body>
    <!--invalid：验证无效时候触发的时间-->
    <from>
        <input type="text" required="required">
        <span></span>
        <input type="submit" value="提交">
    </from>

    <script>
        var txt = document.getElementsByTagName('input')[0];
        txt.addEventListener("invalid", fn, false)
        function fn() {
            alert()
        }

        //validity或者表单元素的验证的相关属性。valid为validity二级属性，表示验证的通过

        btn.onclick = function (ev) {
            alert(txt.validity.valid);
            //checkValidity方法与结果与validity.valid相同
            alert(txt.checkValidity());
            //preventDefault阻止默认事件
            if (!txt.checkValidity) {
                ev.preventDefault();
            }
        }

    </script>
</body>

</html>